<script setup lang="ts">
import { ref } from "vue";
import type { Ref } from "vue";
import {
    ArrowLeft,
    ArrowRight,
    Document,
    Location,
    Menu,
} from "@element-plus/icons-vue"

const navMenuCollapsed: Ref<boolean> = ref(true)

const handleOpen:any = (key:string, keyPath:string) => {
    //console.log("菜单已展开", key, keyPath)
}

const handleClose:any = (key:string, keyPath:string) => {
    // console.log("菜单已闭合", key, keyPath)
}

const toggleNavMenuCollapseStatus:any = () => {
    navMenuCollapsed.value = !navMenuCollapsed.value
}
</script>

<template>
    <aside>
        <el-row>
            <el-menu
                default-active="1-1"
                :unique-opened="false"
                :default-openeds="['1']"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                :collapse="navMenuCollapsed"
            >
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon><Menu /></el-icon>
                        <span>一级菜单</span>
                    </template>
                    <el-menu-item index="1-1">二级项目a</el-menu-item>
                    <el-sub-menu index="1-2">
                        <template #title>二级子菜单b</template>
                        <el-menu-item index="1-2-1">三级项目x</el-menu-item>
                    </el-sub-menu>
                </el-sub-menu>
                <el-sub-menu index="2">
                    <template #title>
                        <el-icon><Location /></el-icon>
                        <span>地图菜单</span>
                    </template>
                    <el-menu-item index="2-1">二级项目c</el-menu-item>
                    <el-menu-item index="2-2">二级项目d</el-menu-item>
                </el-sub-menu>
                <el-menu-item index="3" disabled>
                    <el-icon><Document /></el-icon>
                    <template #title>文档菜单</template>
                </el-menu-item>
            </el-menu>
            <span class="hide-nav-menu">
                <button @click="toggleNavMenuCollapseStatus" class="compact-btn">
                    <el-icon>
                        <template v-if="navMenuCollapsed">
                          <ArrowRight />
                        </template>
                        <template v-else>
                          <ArrowLeft />
                        </template>
                    </el-icon>
                </button>
            </span>
        </el-row>
    </aside>
    <div class="content">
        <router-view />
    </div>
</template>

<style scoped>
aside {
    position: fixed;
    bottom: 35px;
    left: 3px;
    z-index: 200;
    display: inline;
}

span.hide-nav-menu {
    display: flex;
    width: min-content;
    height: available;
    align-items: center;

}

.compact-btn {
    padding: 0;
    margin: 0;
    height: 85px;
    width: 15px;
    border: none;
    color: white;
    background-color: rgba(0,0,0,0.25);
}

.compact-btn:hover {
    background-color: rgba(31,31,31,0.5);
}

.el-menu-vertical-demo {
    padding-left: 0;
    display: inline;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 0;
}

.content {
    position: relative;
    /*position: absolute;*/
    /*z-index: 0;*/
    /*top: 0;*/
    /*left: 0;*/
    /*right: 0;*/
}
</style>
